<template>
  <!-- 催收执行页-案件信息模块 -->
  <section class="component collection-case-info panel">
    <div class="case-info-box">
      <el-tabs v-model="activeName">
        <el-tab-pane
          :key="item.name"
          :label="item.label"
          :name="item.name"
          v-for="item of tabs"
        ></el-tab-pane>
      </el-tabs>
      <!-- <el-button @click="onClickDetail" class="case-info-detail"> 查看详情</el-button> -->
    </div>

    <keep-alive>
      <component
        :is="activeName"
        :ref="activeName"
        class="case-info-component"
      ></component>
    </keep-alive>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { components, tabs ,tabsa } from "./collection-case-info/";
import { namespace } from "vuex-class";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";
import { Dependencies } from "~/core/decorator";


const CollectionExecutionModule = namespace("collection-execution");

@Component({
  components: {
    ...components
  }
})
export default class CollectionCaseInfo extends Vue {
  @CollectionExecutionModule.State private caseInfoActiveName;
  @CollectionExecutionModule.Mutation private updateCaseInfoActiveName;
  @CollectionExecutionModule.State private caseId;
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  private topInfo: any;
  private OrderNum: number = 0
  private tabs: any[] = []


   private mounted(){
    this.watchOrder()
     this.getOrderNum()
  }
  private watchOrder(){
    window.addEventListener('setItem', () => {
          const orderCarNum:any = sessionStorage.getItem("watchStorage")
          this.tabs = orderCarNum>0?tabsa:tabs
        });
  }
  private getOrderNum() {
      this.caseOperatorPageService
      .queryCarLoanOrderInfo(this.caseId)
      .subscribe((data) => {
        this.OrderNum = data["totalSize"]
        this.tabs = this.OrderNum === 0? tabs: tabsa
      })

  }
  private get activeName() {
    return this.caseInfoActiveName;
  }

  private set activeName(val) {
    this.updateCaseInfoActiveName(val);
  }

  private onClickDetail() {
    window.open(this.topInfo.detailUrl);
  }
}
</script>
<style lang="less">
.component.collection-case-info {
  .case-info-box {
    position: relative;
    .case-info-detail {
      position: absolute;
      right: 35px;
      top: 0;
    }
  }
  .case-info-component {
    height: 184px;
    overflow-y: auto;
  }
}
</style>
